<template>
 <div class="charts"><div class='chart' id='charts' ref='charts'></div></div>
</template>

<script>

export default {
  data(){
   return {
    option: {
        color: ["rgb(98, 0, 234)"],
        backgroundColor: {
          color: "#F6F6F6"
        },
        title: {
            text: '模板统计',
            textStyle: {
               fontSize: 12,
               fontWeight: 'bold',
               color: '#222',
            },
            padding: [5, 0, 0, 127],
            top: 50,
            left: -70,
        },
        grid: [{
            x: '110px',
            y: '110px',
            height: '97px',
        }],
        tooltip: {
            'trigger': 'axis',
             formatter([visit, order, percent], ticket, cb){
              let ret = "<div style='padding-right: 10px;'>";
              ret   =  visit.marker + visit.seriesName + " " + visit.value
                   /* +  order.marker + order.seriesName + " " + order.value
                    +  '<span>' + percent.seriesName + " " + percent.value + "%</span>"*/
              ret += "</div>"
              return ret
            },
            extraCssText: 
            `border-radius: 4px; 
             background: rgba(0,0,0,0.8);
             font-size: 12px;
             font-weight: bold;
             color: white;
             height: 36px;
             line-height: 36px;
             padding-right: 10px;
             padding-left: 10px;
            `
        },
        xAxis: {
            data: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,22,23,24,25,26,27,28,29,30],
            axisTick: {
                show: false,
            },
            axisLine:{
                show: false
            },
            splitLine:{
             
            },
            minInterval: 2,
            axisLabel:{
                show: true,
                textStyle: {
                    fontSize: 12,
                    fontWeight: "bold",
                    color: "#aaa",
                },  
                margin: 18
            }
        },
        yAxis: [{
            show: true,
            type: 'value',
            interval: 30000,
            name: 'Style',
            nameLocation: 'start',
            nameGap: 18,
            nameTextStyle: {
                fontSize: 12,
                fontWeight: "bold",
                color: "#aaa"
            },
            splitLine: {
                lineStyle: {
                    color: '#EEE'
                },
                show: true,
                onZero: false
            }, 
           
            axisTick:{
                show: false
            },
            axisLine:{
               show: false,
               onZero: false
            },
            axisLabel: {
                show: true,
                textStyle:{
                    fontSize: 12,
                    fontWeight: "bold",
                    color: "#aaa"
                },
                formatter: (value, index) => index ? value : ""
            },
        }, {
            show: false,
            type: 'value',
            interval: 30000,
        }],
        series: [{ 
            name: '访问人数',
            type: 'bar',
            barWidth:'10px',
            stack: 'Style',
            data: [],
            itemStyle:{
                normal: {
                       color: '#6200ea',
                }
            },
            
        }/*, { 
            name: '下单人数',
            type: 'bar',
            barWidth:'10px',
            yAxisIndex: 0,
            stack: 'Style',
            data: [],
            itemStyle:{
                normal: {
                 color: '#00a699',
                }
            }
        }, { 
            name: '模板转化',
            type: 'bar',
            barWidth:'1px',
            data: [],
            itemStyle:{
                normal: {
                    opacity: 0,
                    color: 'rgba(0,0,0,0)',
                }
                
            }
        }*/]
    }
   } 
  }, 
  methods: {
     updateChart(){
       this.chart.setOption(this.option); 
       this.interval = this.interval || setInterval(function(){
           if(!document.querySelector(".bk") && document.querySelector(".chart")){
               let bk = document.createElement("div");
               bk.classList.add("bk");
               document.querySelector(".chart").firstChild.appendChild(bk);
            }
       }, 100);
     },
     setParams(names, view, buy, per){
         /*if(names && view && buy && per) console.log(names.length, view.length, buy.length, per.length)*/
        names  && (this.option.xAxis.data  = names.map(_ => _.replace("style", "")));
        view   && (this.option.series[0].data = view);
        /*buy    && (this.option.series[1].data = buy);
        per    && (this.option.series[2].data = per);*/
        this.chart.setOption(this.option); 
     }
   },
  beforeUpdate(){
     this.updateChart();
  },
  created(){
    this.$root.eventHub.$on('updateChart', this.setParams.bind(this));
  },
  mounted(){
    this.chart = echarts.init(document.getElementById('charts'));
    this.updateChart();
    
  }
   
}
</script>